<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>用户个人中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 全局样式 */
        .container {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        .zinv-image {
            width: 100%;
            height: 100vh;
            position: absolute;
            z-index: -1;
            object-fit: cover;
        }

        /* 导航栏样式 */
        .nav-bar {
            width: 100%;
            height: 44px; /* 88rpx */
            display: flex;
            align-items: center;
            padding: 0 15px; /* 30rpx */
            position: absolute;
            top: 35px; /* 70rpx */
        }
        
        .back-btn {
            margin-right: 5px; /* 10rpx */
        }
        
        .back-icon {
            width: 30px; /* 60rpx */
            height: 30px; /* 60rpx */
            object-fit: cover;
        }
        
        .nav-title {
            width: 40px; /* 80rpx */
            height: 25px; /* 50rpx */
            margin-left: 5px; /* 10rpx */
            margin-top: -5px; /* -10rpx */
            object-fit: cover;
        }

        /* 头像区域样式 */
        .avatar-container {
            width: 100%;
            height: 220px; /* 440rpx */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px; /* 20rpx */
            position: absolute;
            top: 80px; /* 160rpx */
            left: 0;
        }

        .avatar-border {
            width: 100px; /* 200rpx */
            height: 100px; /* 200rpx */
            border-radius: 50%;
            overflow: hidden;
            margin-top: -135px; /* -270rpx */
            margin-left: -190px; /* -380rpx */
        }

        .avatar-bg {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        /* 内容区域样式 */
        .content-container {
            width: 95%;
            height: 600px; /* 1200rpx */
            background-color: #fff;
            border-radius: 25px; /* 50rpx */
            margin-top: 200px; /* 400rpx */
            padding: 30px 0 20px; /* 60rpx 0 40rpx */
            box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.1); /* 0 -20rpx 30rpx */
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .option-item {
            width: 90%;
            height: 50px; /* 100rpx */
            margin: 0 auto 10px; /* 20rpx */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px; /* 30rpx */
            position: relative;
        }

        .option-left {
            display: flex;
            align-items: center;
            margin-left: 15px; /* 30rpx */
        }

        .option-icon {
            width: 25px; /* 50rpx */
            height: 20px; /* 40rpx */
            margin-right: 10px; /* 20rpx */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .icon-person {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .icon-location {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .icon-people {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .icon-shield {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .icon-feedback {
            width: 60px; /* 120rpx */
            height: 25px; /* 50rpx */
        }

        .icon-device {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .icon-message {
            width: 50px; /* 100rpx */
            height: 25px; /* 50rpx */
        }

        .option-text {
            font-size: 16px; /* 32rpx */
            color: #333;
            font-weight: bolder;
        }

        .option-right {
            width: 20px; /* 40rpx */
            height: 20px; /* 40rpx */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .arrow-icon {
            width: 25px; /* 50rpx */
            height: 25px; /* 50rpx */
        }

        /* 自定义线样式 */
        .custom-line {
            position: absolute;
            bottom: 5px; /* 10rpx */
            left: 20px; /* 40rpx */
            width: 90%; 
            height: 0.5px; /* 1rpx */
            background-color: #f0f0f0;
        }

        /* 响应式设计 */
        @media screen and (max-width: 320px) {
            .avatar-border {
                width: 80px;
                height: 80px;
                margin-left: -160px;
            }
            .content-container {
                height: 500px;
                margin-top: 180px;
            }
            .option-item {
                height: 45px;
            }
        }

        @media screen and (min-width: 375px) and (max-width: 414px) {
            .avatar-border {
                width: 100px;
                height: 100px;
                margin-left: -190px;
            }
            .content-container {
                height: 600px;
                margin-top: 200px;
            }
            .option-item {
                height: 50px;
            }
        }

        @media screen and (min-width: 414px) {
            .avatar-border {
                width: 120px;
                height: 120px;
                margin-left: -210px;
            }
            .content-container {
                height: 700px;
                margin-top: 220px;
            }
            .option-item {
                height: 55px;
            }
        }
    </style>
</head>
<body>
    <div class="container>
        <img class="zinv-image" src="/static/images/子女端.png" alt="背景">
        
        <!-- 导航栏 -->
        <div class="nav-bar>
            <div class="back-btn>
                <img class="back-icon" src="/static/images/子女左.png" alt="返回">
            </div>
            <img class="nav-title" src="/static/images/子女首页.png" alt="首页">
        </div>
        
        <!-- 头像区域 -->
        <div class="avatar-container>
            <div class="avatar-border>
                <img class="avatar-bg" src="/static/images/子女头像.png" alt="头像背景">
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-container>
            <!-- 个人资料选项 -->
            <div class="option-item>
                <div class="option-left>
                    <div class="option-icon>
                        <img class="icon-person" src="/static/images/个人资料.png" alt="个人资料">
                    </div>
                    <span class="option-text>个人资料</span>
                </div>
                <div class="option-right>
                    <img class="arrow-icon" src="/static/images/右.png" alt="箭头">
                </div>
                <div class="custom-line></div>
            </div>

            <!-- 地址管理选项 -->
            <div class="option-item>
                <div class="option-left>
                    <div class="option-icon>
                        <img class="icon-location" src="/static/images/地址管理.png" alt="地址管理">
                    </div>
                    <span class="option-text>地址管理</span>
                </div>
                <div class="option-right>
                    <img class="arrow-icon" src="/static/images/右.png" alt="箭头">
                </div>
                <div class="custom-line></div>
            </div>

            <!-- 亲人绑定选项 -->
            <div class="option-item>
                <div class="option-left>
                    <div class="option-icon>
                        <img class="icon-people" src="/static/images/亲人绑定.png" alt="老人绑定">
                    </div>
                    <span class="option-text>老人绑定</span>
                </div>
                <div class="option-right>
                    <img class="arrow-icon" src="/static/images/右.png" alt="箭头">
                </div>
                <div class="custom-line></div>
            </div>

            <!-- 账户安全选项 -->
            <div class="option-item>
                <div class="option-left>
                    <div class="option-icon>
                        <img class="icon-shield" src="/static/images/账户安全.png" alt="账户安全">
                    </div>
                    <span class="option-text>账户安全</span>
                </div>
                <div class="option-right>
                    <img class="arrow-icon" src="/static/images/右.png" alt="箭头">
                </div>
                <div class="custom-line></div>
            </div>

            <!-- 意见反馈选项 -->
            <div class="option-item>
                <div class="option-left>
                    <div class="option-icon>
                        <img class="icon-feedback" src="/static/images/意见反馈.png" alt="意见反馈">
                    </div>
                    <span class="option-text>意见反馈</span>
                </div>
                <div class="option-right>
                    <img class="arrow-icon" src="/static/images/右.png" alt="箭头">
                </div>
                <div class="custom-line></div>
            </div>

            <!-- 设备管理选项 -->
            <div class="option-item>
                <div class="option-left>
                    <div class="option-icon>
                        <img class="icon-device" src="/static/images/设备管理.png" alt="设备管理">
                    </div>
                    <span class="option-text>设备管理</span>
                </div>
                <div class="option-right>
                    <img class="arrow-icon" src="/static/images/右.png" alt="箭头">
                </div>
                <div class="custom-line></div>
            </div>

            <!-- 消息设置选项 -->
            <div class="option-item>
                <div class="option-left>
                    <div class="option-icon>
                        <img class="icon-message" src="/static/images/消息设置.png" alt="消息设置">
                    </div>
                    <span class="option-text>消息设置</span>
                </div>
                <div class="option-right>
                    <img class="arrow-icon" src="/static/images/右.png" alt="箭头">
                </div>
                <div class="custom-line></div>
            </div>
        </div>
    </div>
</body>
</html>